<template>
  <div class="_wz_cent_main CptVideo">
    <Card :bordered="true" dis-hover style="height: 100%;">
      <p slot="title">视频列表</p>
      <div slot="extra" class="tv_box" style="padding: 4px 15px 0 0;">
        <span title="切换1个窗口">
            <i class="icon_num4" @click="initFlash(1)"></i>
        </span>
        <span title="切换4个窗口">
            <i class="icon_num31" @click="initFlash(4)"></i>
         </span>
<!--        <span title="切换6个窗口">-->
<!--             <i class="icon_num51" @click="initFlash(6)"></i>-->
<!--         </span>-->
        <span title="切换8个窗口">
           <i class="icon_num61" @click="initFlash(8)"></i>
          </span>
<!--        <span title="切换9个窗口">-->
<!--             <i class="icon_num71" @click="initFlash(9)"></i>-->
<!--         </span>-->
        <span title="切换16个窗口">
            <i class="icon_num81" @click="initFlash(16)"></i>
          </span>
        <Dropdown @on-click="changeVideo">
          <a href="javascript:void(0)">
           <span>
             <i class="icon_num1"></i>
             <i class="icon icon_xl"></i>
            </span>
          </a>
          <DropdownMenu slot="list">
            <DropdownItem name="stopVideo">停止所有视频</DropdownItem>
            <DropdownItem name="reSetVideo">清除所有视频</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
      <div ref="cptVideoHeight" class="cptVideoHeight" style="height: 100%;">
        <div id="cmsv6flash" style="width: 100%;height: 100%;"></div>
      </div>
    </Card>
  </div>
</template>

<script>
var isInitFinished = false//视频插件是否加载完成
export default {
  data() {
    return {
      videoIndex: 0,
      isVodMode: false,
      numberWindows:16
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this
    that.$nextTick(function () {
      that.initPlayerExample();
    })
    // that.getJsession();
  },
  methods: {//执行的方法
    //视频状态
    changeVideo(name) {
      var that = this;
      if (name == "reSetVideo") {//停止所有视频
        that.reSetVideo();
      } else if (name == "stopVideo") {//清除所有视频
        that.stopVideo();
      }
    },
    initPlayerExample() {
      //视频插件初始化参数
      var params = {
        lang: 'zh-cn', //"en", "zh-cn", "zh-tw"
        isVodMode: this.isVodMode
      }
      //初始化flash
      // swfobject.embedSWF("player.swf", "cmsv6flash", 400, 400, "11.0.0", null, null, params, null);
      //初始化视频播放器
      ttxVideoAll.init('cmsv6flash', '100%', this.$refs.cptVideoHeight.offsetHeight, params, 'auto')
      // ttxVideoAll.init(cmsv6flash, width, height, params, playerType)
      this.initFlash()
    },
    initFlash(e) {
      var that = this
      if (e) {
        that.numberWindows = e
      }
      if (typeof swfobject == 'undefined' || swfobject.getObjectById('cmsv6flash') == null ||
        typeof swfobject.getObjectById('cmsv6flash').setWindowNum == 'undefined') {
        setTimeout(function () {
          that.initFlash()
        }, 50)
      } else {
        //设置视频插件的语言
        swfobject.getObjectById('cmsv6flash').setLanguage('cn.xml')
        //先将全部窗口创建好
        swfobject.getObjectById('cmsv6flash').setWindowNum(36)
        //再配置当前显示的窗口数目
        swfobject.getObjectById('cmsv6flash').setWindowNum(that.numberWindows)
        //设置视频插件的服务器ip和登录服务器端口
        swfobject.getObjectById('cmsv6flash').setServerInfo('zdaqweb.xd365.vip', '6605')
        isInitFinished = true
      }
    },
    playVideo(data) {
      this.isVodMode = true
      this.stopVideo()
      swfobject.getObjectById('cmsv6flash2').startVodM([data], '')
      // setTimeout(function (){ //定时
      //
      // },5000)
    },
    multiChannelVideo(data){
      var PlaybackUrlWs = []
      for (var i = 0; i < data.length; i++) {
        PlaybackUrlWs.push(data[i].url)
      }
      swfobject.getObjectById('cmsv6flash2').startVodM(PlaybackUrlWs, '')
    },
    realTimeVideo(did, jsession) {
      var that = this
      if(!(that.videoIndex + 1 < that.numberWindows)){
        that.$Message.warning('现窗口可播放数量为 ' + that.numberWindows + ' 个');
        return false;
      }
      //this.initPlayerExample() //初始化视频组件
      //停止播放视频
      // swfobject.getObjectById('cmsv6flash').stopVideo(0)
      //设置视频窗口标题
      // swfobject.getObjectById('cmsv6flash').setVideoInfo(0, did + '视频1')
      //播放视频
      var mun = 4 + that.videoIndex;
      //
      for (; that.videoIndex < mun; that.videoIndex++) {
        swfobject.getObjectById('cmsv6flash').startVideo(that.videoIndex, jsession, did, (that.videoIndex - mun + 4), 1, true)
      }
    },
    stopVideo() { //停止视频
      this.videoIndex = 0;
      for (var i = 0; i < 16; i++) {
        swfobject.getObjectById('cmsv6flash').stopVideo(i)
      }
    },
     reSetVideo() { //清除所以视频
      this.videoIndex = 0;
      this.$emit('empty')
       for (var i = 0; i < 16; i++) {
         swfobject.getObjectById('cmsv6flash2').reSetVideo(i)
       }

      // this.initPlayerExample() //初始化
    },
  },
  watch: {//监听
  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
.CptVideo {
  padding: 0px !important;

  .ivu-card-body {
    height: calc(100% - 51px);
  }

  .tv_box span {
    display: inline-block;
    padding: 0 5px;
    position: relative;
    margin-right: 20px;

    i {
      background: url('../../../assets/icon_s.png') 0px -0px no-repeat;
      width: 14px;
      height: 14px;
      cursor: pointer;
      display: inline-block;
      font-style: normal;
      vertical-align: middle;
      float: left;

    }
    .icon_num1{
      background-position: -100px -326px;
    }

    .icon_num1:hover{
      background-position: -385px -50px;
    }

    .icon_num31 {
      background-position: -120px -326px;
    }

    .icon_num31:hover {
      background-position: -120px -346px;
    }

    .icon_num4 {
      background-position: -100px -326px;
    }

    .icon_num4:hover {
      background-position: -385px -50px;
    }

    .icon_num51 {
      background-position: -140px -326px;
    }

    .icon_num51:hover {
      background-position: -140px -346px;
    }

    .icon_num61 {
      background-position: -160px -326px;
    }

    .icon_num61:hover {
      background-position: -160px -346px;
    }

    .icon_num71 {
      background-position: -180px -326px;
    }

    .icon_num71:hover {
      background-position: -180px -346px;
    }

    .icon_num81 {
      background-position: -200px -326px;
    }

    .icon_num81:hover {
      background-position: -200px -346px;
    }


    .icon_num1:hover + .icon_xl {
      background-position: -414px -50px;
    }

    .icon_xl {
      background-position: -193px -50px;
      width: 5px;
      height: 14px;
      margin-left: 2px;
    }
  }

  .tv_box span:hover .t_box {
    display: block;
  }

  .t_box {
    display: none;
    position: absolute;
    top: 28px;
    right: 0;
    z-index: 999;
    width: 110px;
    height: 64px;
    line-height: 18px;
    text-align: left;
    border: #d6d6d6 solid 1px;
    background-color: #fff;
    box-shadow: rgb(0 0 0 / 10%) 0px 2px 4px;

    .stopAll {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50%;
      cursor: pointer;
    }

    .stopAllA:hover {
      color: white;
      background: #1890ff;
    }

    .stopAllB:hover {
      color: white;
      background: #1890ff;
    }
  }
  #cmsv6flash * {
    box-sizing: content-box ;
  }
}

</style>
